import React, {Component, ReactInstance} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    Image,
    FlatList,
    StyleProp,
    ViewStyle,
    ScrollView,
    TouchableOpacity, RefreshControl
} from 'react-native'

import BannerSection from "./bannerSection";
import BoutiquesSection from "./boutiquesSection";
import SpecialSection from "./specialSection";
import ProductSection from "./productSection";
import * as _ from "lodash";
import {inject, IReactComponent, IWrappedComponent} from "mobx-react";
import {observer, Provider} from "mobx-react/custom";
import {Store} from "../../../../store";
import {toJS} from "mobx";
import {any} from "prop-types";
import {afterAnimation} from "../../../../util";
import {getProductStoreInstance} from "../../../../store/modules/main/product";
import {getBannerStoreInstance} from "../../../../store/modules/main/banner";
import {getBoutiquesStoreInstance} from "../../../../store/modules/main/boutiques";
import {getSpecialStoreInstance} from "../../../../store/modules/main/special";

interface CategoryProps extends Store {
    index: number,
    tabLabel: string,
    categoryId: number
}

export default class Category extends Component<CategoryProps, any, any> {
    state = {
        refreshing: false
    };
    category_product = getProductStoreInstance();
    category_banner = getBannerStoreInstance();
    category_boutiques = getBoutiquesStoreInstance();
    category_special = getSpecialStoreInstance();

    _onRefresh = async (showToast = true) => {
        const {categoryId} = this.props;
        this.setState({refreshing: true});
        const bannerSection: any = this.refs["bannerSection"];
        const boutiquesSection: any = this.refs["boutiquesSection"];
        const specialSection: any = this.refs["specialSection"];
        const productSection: any = this.refs["productSection"];
        await Promise.all([
            bannerSection.wrappedInstance.refresh(categoryId),
            specialSection.wrappedInstance.refresh(categoryId),
            productSection.wrappedInstance.refresh(categoryId),
            boutiquesSection.wrappedInstance.refresh(categoryId)]);
        showToast&&global.showSuccess("刷新成功!");
        this.setState({refreshing: false})
    };

    componentDidMount() {
        this._onRefresh(false)
    }

    render() {


        return (
            <ScrollView
                refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh}
                                                title={"加载中..."}/>}
                style={[CategoryStyles.container]}
                showsVerticalScrollIndicator={false}>
                <Provider
                    product={this.category_product}
                    banner={this.category_banner}
                    boutiques={this.category_boutiques}
                    special={this.category_special}
                >
                    <View>
                        <BannerSection ref={"bannerSection"}/>
                        <BoutiquesSection ref={"boutiquesSection"}/>
                        <SpecialSection ref={"specialSection"}/>
                        <ProductSection ref={"productSection"}/>
                    </View>
                </Provider>
            </ScrollView>
        )
    }
}


const CategoryStyles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 3,
        backgroundColor: "#F2F2F2"
    },

});
